本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」

書中不只重構了程式架構、改善了介面設計，還新增了 2 個新遊戲呦！ˋ( ° ▽、° )

新遊戲分別使用了陀螺儀與震動回饋，趕快買書來研究研究吧！ლ(╹∀╹ლ)

在此感謝深智數位的協助，歡迎大家前往購書，鱈魚感謝大家 (｡･∀･)。

助教：「所以到底差在哪啊？沒圖沒真相，被你坑了都不知道。(´。＿。｀)」

鱈魚：「你對我是不是有甚麼很深的偏見啊 (っ °Д °;)っ，來人啊，上連結！」

此次主題預期建立一個可以做為主機與搖桿的 Web 與提供 WebSocket 即時連線的 Server，先讓我們畫個架構圖，協助思考並釐清結構吧。

為了讓架構更加簡單，開發階段會將 Web 與 Server 專案分離，Web 透過 Vite 之 Dev Server 提供網頁資源，Server 則純粹提供 WebSocket 連線。

整體架構

整體架構基本上如上圖，基本流程為：

1. 瀏覽器從 Vite Dev Server 取得網頁
2. 成功取得網頁後，網頁會向 WebSocket Server 請求連線
3. 連線成功後 WebSocket Server 會提供網頁一個 Socket ID 表示已連線之 client
4. 最後網頁會不斷地向 WebSocket Server 傳遞資料，WebSocket Server 則會在所有 client 之前同步資料

以上是網頁即時通訊架構，接下來是網頁呈現的部分。

網頁架構

首頁會提供兩個按鈕，分別為：

• 建立派對（建立房間）：點選後此 Web 會作為 game-console 開始連線，提供房間號碼與遊戲畫面。
• 加入遊戲（連線至指定房間）：點選後填出輸入框，輸入房間號碼後做為玩家加入房間。

兩個按鈕其基本流程如下。

建立派對（建立房間）

加入遊戲（連線至指定房間）

現在我們有基本概念了，讓我們開始建立開發環境與專案吧！